// ModelingPager.tsx
import { View, Text, Image, ScrollView } from "@tarojs/components"
import Taro from "@tarojs/taro"
import "./index.scss"
import React, { useEffect, useState } from "react";

interface WaterfallItem {
  id: string | number;
  height: number;
  image: string;
  title: string;
  desc: string
  [key: string]: any;
}

const mockData: WaterfallItem[] = [
  {
    id: 1,
    height: Math.floor(Math.random() * 50) + 180, // 180-230px
    image: `https://qcloud.dpfile.com/pc/RO1PPYWFnALhPVMeL2P9siIWxRozWWd0oFFi9jNgpo3b496vDQVmtOj-cPABMfP4.jpg`,
    title: "商务精英发型",
    desc: "干练利落，适合职场男士"
  },
  {
    id: 2,
    height: Math.floor(Math.random() * 50) + 180,
    image: `https://q8.itc.cn/images01/20240804/39c3817ba1994abd9aead996b0bf3b7c.jpeg`,
    title: "经典油头发型",
    desc: "复古绅士，展现成熟魅力"
  },
  {
    id: 3,
    height: Math.floor(Math.random() * 50) + 180,
    image: `https://qcloud.dpfile.com/pc/pgcO0xkly7CBv3ao29M-7V9IFgympCQbiW1EcHvmo9y3yWHxK51LrzCwqzz7tC7u.jpg`,
    title: "时尚Undercut",
    desc: "两侧剃短，顶部留长，潮流之选"
  },
  {
    id: 4,
    height: Math.floor(Math.random() * 50) + 180,
    image: `https://qcloud.dpfile.com/pc/inaWP2F0mY0Pc9FnQaogO_WJEZ421D1nVRgkFbk5JYY57EIn_lnJvPOWlS4lMt0N.jpg`,
    title: "韩式纹理烫",
    desc: "自然蓬松，打造暖男形象"
  },
  {
    id: 5,
    height: Math.floor(Math.random() * 50) + 180,
    image: `https://qcloud.dpfile.com/pc/AN_Ej1VCA8IKQ7cI4J3bXseQrOn4vevyUZhwxp7szq8opzl7UKxf251v2HlD_Lu0.jpg`,
    title: "美式板寸头",
    desc: "简洁硬朗，阳刚之气十足"
  },
  {
    id: 6,
    height: Math.floor(Math.random() * 50) + 180,
    image: `https://q2.itc.cn/images01/20240504/b348505d53b44e46bfd2f9881874f3eb.jpeg`,
    title: "日系微长发",
    desc: "文艺慵懒，展现个性风格"
  },
  {
    id: 7,
    height: Math.floor(Math.random() * 50) + 180,
    image: `https://q3.itc.cn/q_70/images03/20241223/fbfdaac58209477c968b46bfdeda8c6f.jpeg`,
    title: "渐变短发",
    desc: "层次分明，技术感强烈"
  },
  {
    id: 8,
    height: Math.floor(Math.random() * 50) + 180,
    image: `https://qcloud.dpfile.com/pc/WQWANIvzqQ1uQoTrOEYcww9C5P8PtPp6Zk1vUY0maeZMKGl33CQ-_7ixUcHgXC9-.jpg`,
    title: "复古中分发型",
    desc: "经典回归，文艺青年首选"
  },
  {
    id: 9,
    height: Math.floor(Math.random() * 50) + 180,
    image: `https://img0.baidu.com/it/u=3053193994,4133939158&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=749`,
    title: "飞机头发型",
    desc: "个性张扬，酷感十足"
  },
  {
    id: 10,
    height: Math.floor(Math.random() * 50) + 180,
    image: `https://qcloud.dpfile.com/pc/Xw8Zt-bBL8VH7uSo0lrhLeO5hZutN4rUs-tZW8yIQYPuCvjEkdZxjKI_hzpUwDOs.jpg`,
    title: "清爽平头",
    desc: "简单易打理，夏季首选"
  },
  {
    id: 11,
    height: Math.floor(Math.random() * 50) + 180,
    image: `https://picsum.photos/200/290`,
    title: "商务偏分",
    desc: "稳重得体，适合各种场合"
  },
  {
    id: 12,
    height: Math.floor(Math.random() * 50) + 180,
    image: `https://picsum.photos/200/330`,
    title: "时尚脏辫",
    desc: "街头文化，个性鲜明"
  },
  {
    id: 13,
    height: Math.floor(Math.random() * 50) + 180,
    image: `https://picsum.photos/200/300`,
    title: "英伦后梳",
    desc: "优雅绅士，复古韵味"
  },
  {
    id: 14,
    height: Math.floor(Math.random() * 50) + 180,
    image: `https://picsum.photos/200/320`,
    title: "渐变雕刻",
    desc: "精致工艺，展现独特品味"
  },
  {
    id: 15,
    height: Math.floor(Math.random() * 50) + 180,
    image: `https://picsum.photos/200/280`,
    title: "自然碎发",
    desc: "随性自然，日常百搭"
  }
];

const ExamplePager: React.FC = () => {
  const [data, setData] = useState<WaterfallItem[]>([]);

  useEffect(() => {
    setData(mockData);
  }, []);

  return (
    <ScrollView
      scrollY
      style={{
        height: '100vh',
        backgroundColor: '#f7f7f7'
      }}
      className="waterfall-scrollview"
    >
      <View className="waterfall-container">
        {data.map(item => (
          <View key={item.id} className="waterfall-item">
            <Image
              src={item.image}
              mode="aspectFill"
              className="waterfall-image"
              style={{ height: `${item.height}px` }}
            />
            <View className="waterfall-content">
              <View className="waterfall-title">{item.title}</View>
              <View className="waterfall-desc">{item.desc}</View>
            </View>
          </View>
        ))}

      </View>
      <View className={'bottom'}></View>
    </ScrollView>
  );
};

export default ExamplePager
